<!DOCTYPE html>
<html>
<title>Shotgun</title>

<head>
    <meta charset="utf-8">
    <script>
        let path = '';
        let subPaths = location.pathname.split('/');
        if (subPaths.length === 2 && subPaths[1].indexOf('html') === -1) {
            path = subPaths[1];
        }
        path = path && path + '/';
        document.write('<script src="' + path + 'head_cdn0.js"><\/script>');
        document.write('<script src="' + path + 'head_cdn1.js"><\/script>');
    </script>
</head>

<body>
    <div id="app">
        <el-table :data="shares" style="font-size: 15px" size="mini"
            :default-sort="{prop:'security', order:'ascending'}" stripe>
            <el-table-column prop="account" label="账号" size="mini"></el-table-column>
            <el-table-column prop="security" label="股票代码" size="mini" sortable></el-table-column>
            <el-table-column prop="name" label="股票名称" size="mini"></el-table-column>
            <el-table-column prop="avg_price" label="成本价" size="mini"></el-table-column>
            <el-table-column prop="total" label="数量(股)" size="mini"></el-table-column>
            <el-table-column prop="sellable" label="可卖(股)" size="mini"></el-table-column>
            <el-table-column prop="market_value" label="市值(元)" size="mini">
                <template slot-scope="scope">
                    {{ Math.round(scope.row.market_value) }}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" size="mini"></el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button @click="onSell(scope.row)" type="primary" size="mini">卖出</el-button>
                    <el-button @click="onEntrust(scope.row)" type="primary" size="mini">明细</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog :visible.sync="showSell" width="300px" style="left: 60%;">
            <el-form ref="sellForm" :model="sellForm" label-width="80px">
                <el-form-item label="账号" size="mini">
                    <el-input v-model="sellForm.account" style="width:120px"></el-input>
                </el-form-item>
                <el-form-item label="股票" size="mini">
                    <el-input v-model="sellForm.security" style="width:120px"></el-input>
                </el-form-item>
                <el-form-item label="名称" size="mini">
                    <el-input v-model="sellForm.name" style="width:120px"></el-input>
                </el-form-item>
                <el-form-item label="价格" size="mini">
                    <el-input v-model="sellForm.price" style="width:120px"></el-input>
                </el-form-item>
                <el-form-item label="股数" size="mini">
                    <el-input v-model="sellForm.quantity" style="width:120px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="sell" size="mini">卖出</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog :visible.sync="showEntrustments" width="1080px">
            <el-table :data="entrustments" style="font-size: 13px" size="mini" stripe>
                <el-table-column prop="account" label="账号" size="mini"></el-table-column>
                <el-table-column prop="security" label="股票代码" size="mini" sortable></el-table-column>
                <el-table-column prop="name" label="名称" size="mini" sortable></el-table-column>
                <el-table-column prop="hth" label="委托号" size="mini"></el-table-column>
                <el-table-column prop="buy_or_sell" label="买卖方向" size="mini"></el-table-column>
                <el-table-column prop="quantity" label="数量(股)" size="mini"></el-table-column>
                <el-table-column prop="price" label="委托价格" size="mini"></el-table-column>
                <el-table-column prop="state" label="状态" size="mini">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.state==1">已报</el-tag>
                        <el-tag type="primary" v-if="scope.row.state==2">已撤</el-tag>
                        <el-tag type="primary" v-if="scope.row.state==3">成交</el-tag>
                        <el-tag type="error" v-if="scope.row.state==4">失败</el-tag>
                        <el-tag v-if="scope.row.state==9">未知</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" size="mini">
                    <template slot-scope="scope">
                        <el-button @click="cancel(scope.row)" type="primary" size="mini">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>


    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                shares: [],
                entrustments: [],
                accounts: [],
                sellForm: {
                    account: null,
                    security: null,
                    name: null,
                    quantity: 0,
                    price: 0
                },
                showSell: false,
                showEntrustments: false
            },
            methods: {
                onSell(row) {
                    this.showSell = !this.showSell;
                    this.sellForm.account = row.account;
                    this.sellForm.security = row.security;
                    this.sellForm.name = row.name;
                    this.sellForm.quantity = row.sellable;
                    this.sellForm.price = 0;
                },
                onEntrust(row) {
                    this.getEntrustments(row);
                    this.showEntrustments = !this.showEntrustments;
                },
                cancel(row) {
                    let self = this;
                    let virtualPath = getVirtualPath();
                    axios.post(`${virtualPath}/api/trade`, {
                        "action": "cancel",
                        "security": row.security,
                        "lines": [
                            {
                                "account": row.account,
                                "hth": [row.hth]
                            }
                        ]
                    }).then(function (resp) {
                        let res = resp.data[0];
                        let msg = res.success && '成功' || '失败: ' + res.error;
                        showNotify(self, msg, res.success && 'success' || 'error')
                        self.getEntrustments(row);
                    }).catch(function (error) {
                        showNotify(self, error.response.data.message, 'warning')
                    });
                },
                sell() {
                    let price = parseFloat(this.sellForm.price);
                    if (!price) {
                        showNotify(this, '请输入价格', 'warning');
                        return;
                    }
                    let self = this;
                    let virtualPath = getVirtualPath();
                    axios.post(`${virtualPath}/api/trade`, {
                        "action": "sell",
                        "security": this.sellForm.security,
                        "price": price,
                        "lines": [
                            {
                                "account": this.sellForm.account,
                                "quantity": [parseInt(this.sellForm.quantity)]
                            }
                        ]
                    }).then(function (resp) {
                        let res = resp.data[0];
                        let msg = res.success && '成功' || '失败: ' + res.error;
                        showNotify(self, msg, res.success && 'success' || 'error')
                    }).catch(function (error) {
                        showNotify(self, error.response.data.message, 'warning')
                    });
                },
                getEntrustments(row) {
                    let self = this;
                    let virtualPath = getVirtualPath();
                    axios.post(`${virtualPath}/api/trade`, {
                        "action": "query",
                        "category": 2,
                        "accounts": [row.account],
                    }).then(function (resp) {
                        let entrustments = resp.data.filter(function (e) {
                            return e.security === row.security;
                        });
                        self.entrustments = entrustments.map(function (e) {
                            e.name = row.name;
                            return e
                        });
                    }).catch(function (error) {
                        showNotify(self, error.data.message, 'warning')
                    });
                },
                getShares() {
                    let self = this;
                    let virtualPath = getVirtualPath();
                    axios.post(`${virtualPath}/api/trade`, {
                        "action": "query",
                        "category": 1,
                        "accounts": this.accounts
                    }).then(function (resp) {
                        self.shares = resp.data;
                    }).catch(function (error) {
                        showNotify(self, error.response.data.message, 'warning')
                    });
                }
            },
            mounted() {
                let self = this;
                let virtualPath = getVirtualPath();
                axios.get(`${virtualPath}/api/accounts`).then(function (resp) {
                    self.accounts = resp.data.filter(function (e) {
                        return e.enable === true;
                    }).map(function (e) {
                        return e.account;
                    })
                    self.getShares();
                }).catch(function (error) {
                    showNotify(self, error.response.data.message, 'warning')
                });
                setInterval(function () {
                    self.getShares();
                }, 3000)
            }
        });

        function showNotify(self, msg, type) {
            self.$notify({
                showClose: true,
                title: '提示',
                message: msg,
                type: type,
                position: 'top-right'
            })
        }

        function getVirtualPath() {
            let virtualPath = location.pathname.split('/')[1]
            if (virtualPath.indexOf('.') != -1) {
                virtualPath = '';
            }
            if (virtualPath && virtualPath.indexOf('/') == -1) {
                virtualPath = '/' + virtualPath;
            }
            return virtualPath;
        }
    </script>

</body>

</html>